$(document).ready(function () {
    let rows = 30
    let cell = 50

    for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
        let rowDiv = $("<div>")
        rowDiv.addClass("rowDiv")

        for (let cellIndex = 0; cellIndex < cell; cellIndex++) {
            let cellDiv = $("<div>")
            cellDiv.css({
                "height": "20px",
                "width": "20px",
                "border": "1px #ffffff solid",
                "background-color": "rgb(173, 216, 230)"
            })
            cellDiv.addClass("row_" + rowIndex)
            cellDiv.addClass("cell_" + cellIndex)

            rowDiv.append(cellDiv)
        }
        $("#plate").append(rowDiv)
    }

    let player = {
        nikename: "天妖凰",
        position: [
            {
                x: 0,
                y: 0
            }, {
                x: 0,
                y: 1
            }, {
                x: 0,
                y: 2
            }, {
                x: 0,
                y: 49
            }, {
                x: 0,
                y: 48
            }, {
                x: 0,
                y: 47
            }, {
                x: 29,
                y: 1
            }, {
                x: 29,
                y: 0
            }, {
                x: 29,
                y: 2
            }, {
                x: 29,
                y: 49
            }, {
                x: 29,
                y: 48
            }, {
                x: 29,
                y: 47
            }
        ],
        color: "123123"
    }


    player.position.forEach(value => {
        console.log(value);
        let cell = $(".row_" + value.x + ".cell_" + value.y)
        console.log(cell);
        cell.css({
            "background-color": "#" + player.color
        })
    })
})